<script setup>
import CategoryBread from "./components/CategoryBread.vue";
import CategoryBanner from "./components/CategoryBanner.vue";
import CategoryList from "./components/CategoryList.vue"
import { useCategory } from "@/composables/useCategory";
const {categoryData} = useCategory()
</script>
<template>
    <div class="top-category">
        <div class="container m-top-20">
            <!-- 面包屑 -->
            <CategoryBread :categoryData="categoryData"/>
            <!-- 轮播图 -->
            <CategoryBanner/>
            <!-- 产品列表 -->
            <CategoryList :categoryData="categoryData"/>
        </div>
    </div>
</template>
<style scoped lang="scss">
.top-category {
  h3 {
    font-size: 28px;
    color: #666;
    font-weight: normal;
    text-align: center;
    line-height: 100px;
  }

  .bread-container {
    padding: 25px 0;
  }
  .home-banner {
    width: 1240px;
    height: 500px;
    margin: 0 auto;

    img {
        width: 100%;
        height: 500px;
    }
}
}
</style>